<script setup lang="ts">
import { MsgType } from '@/enums'
import type { Message } from '@/types/room'
import type { Image} from '@/types/consult'
import { showImagePreview } from 'vant'
import { useUserStore } from '@/stores'
import dayjs from 'dayjs'
import type { Prescription } from '@/types/room'
import { PrescriptionStatus } from '@/enums'
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import EvaluateCard from './evaluateCard.vue'
import { useShowPrescription } from '@/composable'
import { getIllnessTimeText,getConsultFlagOptions} from '@/utils/filter'
const props=defineProps<{
    list:Message[]
}>()

// 预览图片
const onShowImagePreview=(img?:Image[])=>{
    if (img && img.length) {
        showImagePreview(img.map(item=> item.url))
    }
}
const store=useUserStore()
// 格式化时间
const formatTime=(time:string)=>{
    return dayjs(time).format('HH:mm')
}
// 图片加载完成后 滚动到底部
const loadSuccess=(notScroll?:boolean)=>{
    if (notScroll===true) return
    window.scrollTo(0,document.body.scrollHeight)
}
// 查看处方
const {showPrescriptionPic}=useShowPrescription()

const router=useRouter()
// 去支付
const GoToPay=(pre?:Prescription)=>{
    if (pre) {
        if (pre.status===PrescriptionStatus.Invalid) return showToast('订单已失效')
        if (pre.status===PrescriptionStatus.NotPayment && !pre.orderId) {
            return router.push(`/order/pay?id=${pre.id}`)
        }else{
            router.push(`/order/${pre.orderId}`)
        }
    }
    
}
</script>

<template>
    <template v-for="{msgType,msg,createTime,from,id,fromAvatar,notScroll} in list" ::key="id">
        <!-- 患者卡片 -->
        <div class="msg msg-illness" v-if="msgType===MsgType.CardPat">
            <div class="patient van-hairline--bottom">
            <p>{{msg.consultRecord?.patientInfo.name}} 
                {{msg.consultRecord?.patientInfo.genderValue}} 
                {{msg.consultRecord?.patientInfo.age}}岁</p>
            <p>{{ getIllnessTimeText(msg.consultRecord?.illnessTime) }} | {{getConsultFlagOptions(msg.consultRecord?.consultFlag)}}</p>
            </div>
            <van-row>
            <van-col span="6">病情描述</van-col>
            <van-col span="18">{{ msg.consultRecord?.illnessDesc }}</van-col>
            <van-col span="6">图片</van-col>
            <van-col span="18" @click="onShowImagePreview(msg.consultRecord?.pictures)">点击查看</van-col>
            </van-row>
        </div>
        <!-- 通知-通用 -->
        <div class="msg msg-tip" v-if="msgType===MsgType.Notify">
            <div class="content">
            <span>{{ msg.content }}</span>
            </div>
        </div>
        <!-- 通知-温馨提示 -->
        <div class="msg msg-tip" v-if="msgType===MsgType.NotifyTip">
            <div class="content">
            <span class="green">温馨提示：</span>
            <span>{{ msg.content }}</span>
            </div>
        </div>
        <!-- 通知-结束 -->
        <div class="msg msg-tip msg-tip-cancel" v-if="msgType===MsgType.NotifyCancel">
            <div class="content">
            <span>{{ msg.content }}</span>
            </div>
        </div>
        <!-- 发送文字 -->
        <div class="msg msg-to" v-if="msgType===MsgType.MsgText && from===store.user?.id">
            <div class="content">
            <div class="time">{{ formatTime(createTime) }}</div>
            <div class="pao">{{msg.content}}</div>
            </div>
            <van-image :src="store.user?.avatar" />
        </div>
        <!-- 发送图片 -->
        <div class="msg msg-to" v-if="msgType===MsgType.MsgImage && from ===store.user?.id">
            <div class="content">
            <div class="time">{{ formatTime(createTime) }}</div>
            <van-image 
                @load="loadSuccess(notScroll)"
                fit="contain" 
                :src="msg.picture?.url"
            />
            </div>
            <van-image :src="store.user?.avatar" />
        </div>
        <!-- 接收文字 -->
        <div class="msg msg-from" v-if="msgType === MsgType.MsgText && from!==store.user?.id">
            <van-image :src="fromAvatar" />
            <div class="content">
            <div class="time">{{ formatTime(createTime) }}</div>
            <div class="pao">{{ msg.content }}</div>
            </div>
        </div>
        <!-- 接收图片 -->
        <div class="msg msg-from"  v-if="msgType===MsgType.MsgImage && from !==store.user?.id">
            <van-image :src="fromAvatar" />
            <div class="content">
            <div class="time">{{ formatTime(createTime) }}</div>
            <van-image 
                fit="contain" 
                :src="msg.picture?.url"
                @load="loadSuccess(notScroll)"
            />
            </div>
        </div>
        <!-- 处方卡片 -->
        <div class="msg msg-recipe" v-if="msgType===MsgType.CardPre">
            <div class="content">
            <div class="head van-hairline--bottom">
                <div class="head-tit">
                <h3>电子处方</h3>
                <p @click="showPrescriptionPic(msg.prescription?.id)">原始处方 <van-icon name="arrow"></van-icon></p>
                </div>
                <p>
                    {{msg.prescription?.name}} 
                    {{msg.prescription?.genderValue}} 
                    {{msg.prescription?.age}}岁 
                    {{msg.prescription?.diagnosis}}
                </p>
                <p>开方时间：{{ msg.prescription?.createTime }}</p>
            </div>
            <div class="body">
                <div class="body-item" v-for="med in msg.prescription?.medicines" :key="med.id">
                <div class="durg">
                    <p>{{med.name}} {{ med.specs }}</p>
                    <p>{{ med.usageDosag }}</p>
                </div>
                <div class="num">x1</div>
                </div>
            </div>
            <div class="foot"><span @click="GoToPay(msg.prescription)">购买药品</span></div>
            </div>
        </div>
        <!-- 评价卡片，后期实现 -->
        <div class="msg" v-if="msgType===MsgType.CardEva || msgType===MsgType.CardEvaForm">
            <evaluate-card :evaluateDoc="msg?.evaluateDoc"></evaluate-card>
        </div>
    </template>
</template>

<style lang="scss" scoped>
@import '@/styles/room.scss';
</style>
